<template>
	<view class="team-container">
		<team-navigation-vue :show="show" @team-changed="onTeamChanged"></team-navigation-vue>
		<!-- 团队信息头部 -->
		<view class="team-header">
			<view class="header-main">
				<view class="title">{{choosenTeam.teamName}}</view>
				<PopupMenuVue :choosenTeam="choosenTeam" :members="members" @creatorwannaout="OutCreator()">
					<uni-icons type="more-filled" :size="32"></uni-icons>
				</PopupMenuVue>
			</view>
			<view class="team-desc">
				<text>{{choosenTeam.description}}</text>
				<text>项目：{{projectList?projectList.length:0}}个</text>
			</view>
			<view class="member-section">
				<TeamUsersVue :members="members" :maxDisplayCount="5"></TeamUsersVue>
			</view>
			<button class="invite-btn" size="mini" type="primary" open-type="share"
				@click="onShareAppMessage">邀请成员</button>
		</view>

		<!-- 项目列表 -->
		<view class="project-list" v-if="projectList">
			<view v-for="(item, index) in projectList" :key="index" class="project-card"
				:style="{ backgroundColor: cardColor(item.status) }" @click="toProjectInfo(item.projectId)">
				<view class="card-header">
					<text class="project-name">{{item.projectName}}</text>
					<uni-icons type="more-filled" :size="32" @tap.stop="openStatus(item)"
						catchtap="openStatus(item)"></uni-icons>
				</view>
				<view class="stats-row">
					<view class="stat-item">
						<text class="stat-value">{{item.taskNum}}</text>
						<text class="stat-label">全部</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{item.yesTaskNum}}</text>
						<text class="stat-label">昨日新增</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{item.todayTaskNum}}</text>
						<text class="stat-label">今日新增</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{item.finish}}</text>
						<text class="stat-label">已完成</text>
					</view>
				</view>
			</view>
		</view>
		<movable_fab-vue url="/pages/project_create/project_create"></movable_fab-vue>
		<!-- 自定义操作菜单弹出层 -->
		<TeamUsersVue :members="members" :selectable="true" :max-select="1" ref="teamUserVue" @select="changeCreator">
		</TeamUsersVue>
		<ProjectPopUpVue ref="statusPopUp" @changeProjectStatus="getProjectList()"></ProjectPopUpVue>
	</view>
</template>

<script>
	import app from '@/applogin.js'
	import api from '@/api/api.js'
	import movable_fabVue from '../../component/movable_fab.vue';
	import TeamUsersVue from '../../component/TeamUsers.vue';
	import PopupMenuVue from '../../component/PopupMenu.vue';
	import ProjectPopUpVue from '../../component/ProjectPopUp.vue';
	import teamNavigationVue from '../../component/teamNavigation.vue';
	export default {
		components: {
			movable_fabVue,
			teamNavigationVue,
			TeamUsersVue,
			PopupMenuVue,
			ProjectPopUpVue
		},
		data() {
			return {
				show: true,
				choosenTeam: {
					teamId: -1,
					teamName: 0,
					imagePath: ''
				},
				projectList: [],
				members: []
			}
		},
		onShow() {
			this.show = true
			this.getProjectList()

		},
		onHide() {
			this.show = false
		},
		onShareAppMessage(res) {
			return {
				title: '邀请成员',
				path: '/pages/invite/invite?team_id=' + this.choosenTeam.teamId
			}
		},
		methods: {
			openStatus(project) {
				this.$refs.statusPopUp.open(project)
			},
			cardColor(status) {
				switch (status) {
					case '100':
						return '#edf7f8';
					case '101':
						return '#e8fde0';
					case '102':
						return '#d9d9d9';
					case '103':
						return '#fff8e0';
				}
			},
			changeCreator(e) {
				api.changeCreator({
					teamId: this.choosenTeam.teamId,
					userId: e.userId
				}).then(re => {
					if (re.data.message === '选择了自己') {
						uni.showToast({
							title: '选择自己，无法退出',
							icon: 'none'
						})
					} else {
						api.removeTeamRelationship({
							teamId: this.choosenTeam.teamId
						}).then(re => {
							app.getTeam()
							uni.navigateTo({
								url: '/pages/team_main/team_main'
							})
						})
					}

				})
			},
			OutCreator() {
				this.$refs.teamUserVue.toggleMemberList()
			},
			getProjectList() {
				const choosenTeam = wx.getStorageSync('TheChoosenTeam')
				this.choosenTeam = choosenTeam
				if (choosenTeam && choosenTeam.teamId) {
					api.getProjectAndItsNum({
						teamId: choosenTeam.teamId
					}).then(re => {
						const data = re.data.data
						if (data) {
							this.projectList = data
						}

					})
					api.getTeamUsers({
						teamId: choosenTeam.teamId
					}).then(re => {
						const data = re.data.data;
						console.info(re.data.data)
						if (data) {
							this.members = data
						}
					})
				}
			},
			onTeamChanged(team) {
				this.getProjectList()

			},
			toProjectInfo(projectId) {
				uni.navigateTo({
					url: '/pages/digest_test/digest_test?projectId=' + projectId
				})
			}
		}
	}
</script>

<style lang="scss">
	.team-container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.team-header {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.header-main {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.team-desc {
			font-size: 28rpx;
			color: #666;
			margin: 10rpx 0;

			text {
				display: block;
				margin: 5rpx 0;
			}
		}

		.member-section {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			width: 100%;
		}

		.invite-btn {
			background-color: #007AFF;
			color: #fff;
			font-size: 24rpx;
		}
	}

	.project-list {
		.project-card {
			margin-bottom: 20rpx;
			border-radius: 12rpx;
			padding: 20rpx;

			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.project-name {
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.stats-row {
				display: flex;
				justify-content: space-between;

				.stat-item {
					text-align: center;

					.stat-value {
						display: block;
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}

					.stat-label {
						display: block;
						font-size: 24rpx;
						color: #666;
						margin-top: 5rpx;
					}
				}
			}
		}
	}
</style>